<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG路径</title>
</head>

<body>
    <div>
        下面的例子里定义了一个路径，从点 150,0 开始，连直线到点 75,200，然后连直线到点 225,200，最后闭合这个路径，连直线回到点 150,0:
    </div>
    <svg height="210" width="400">
        <path d="M150 0 L75 200 L225 200 Z" />
    </svg>
    <div>
        贝塞尔曲线是一种非常顺滑的曲线。通常，用户需要提供两个端点和一个或两个控制点。使用一个控制点的贝塞尔曲线叫做二次方贝塞尔曲线，使用两个控制点的贝塞尔曲线叫做三次方贝塞尔曲线。

        下面的例子里使用了二次方贝塞尔曲线，其中 A 和 C 分别是两个端点，B是控制点：
    </div>
    <svg height="400" width="450">
        <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="3" fill="none" />
        <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="3" fill="none" />
        <path d="M 175 200 l 150 0" stroke="green" stroke-width="3" fill="none" />
        <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
        <!-- Mark relevant points -->
        <g stroke="black" stroke-width="3" fill="black">
            <circle id="pointA" cx="100" cy="350" r="3" />
            <circle id="pointB" cx="250" cy="50" r="3" />
            <circle id="pointC" cx="400" cy="350" r="3" />
        </g>
        <!-- Label the points -->
        <g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle">
            <text x="100" y="350" dx="-30">A</text>
            <text x="250" y="50" dy="-10">B</text>
            <text x="400" y="350" dx="30">C</text>
        </g>
    </svg>
    <table cellspacing="0" border="1" style="border-collapse:collapse;">
        <tr>
            <th>指令</th>
            <th>参数</th>
            <th>名称</th>
            <th>描述</th>
        </tr>
        <tr>
            <td>M</td>
            <td>x,y</td>
            <td>moveto</td>
            <td>移动到	移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制</td>
        </tr> 
        <tr>
            <td>m</td>
            <td>x,y</td>
            <td>moveto</td>
            <td>同M，但使用相对坐标</td>
        </tr>
        <tr>
            <td>L</td>
            <td>x,y</td>
            <td>lineto</td>
            <td>连直线到	从当前画笔所在位置绘制一条直线到指定的（x,y）坐标</td>
        </tr>
        <tr>
            <td>l</td>
            <td>x,y</td>
            <td>lineto</td>
            <td>同L，但使用相对坐标</td>
        </tr>
        <tr>
            <td>H</td>
            <td>x</td>
            <td>horizontal lineto</td>
            <td>水平连线到	绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标</td>
        </tr>
        <tr>
            <td>h</td>
            <td>x</td>
            <td>horizontal lineto</td>
            <td>同H，但使用相对坐标</td>
        </tr>
        <tr>
            <td>V</td>
            <td>y</td>
            <td>vertical lineto</td>
            <td>垂直连线到	从当前位置绘制一条垂直直线到参数指定的y坐标</td>
        </tr>
        <tr>
            <td>v</td>
            <td>y</td>
            <td>vertical lineto</td>
            <td>同V，但使用相对坐标</td>
        </tr>
        <tr>
            <td>C</td>
            <td>x1,y1 x2,y2 x,y</td>
            <td>curveto</td>
            <td>三次方贝塞尔曲线	从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度</td>
        </tr>
        <tr>
            <td>c</td>
            <td>x1,y1 x2,y2 x,y</td>
            <td>curveto</td>
            <td>同C，但使用相对坐标</td>
        </tr>
        <tr>
            <td>S</td>
            <td>x2,y2 x,y</td>
            <td>shorthand / 平滑三次方贝塞尔曲线</td>
            <td>从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同</td>
        </tr>
        <tr>
            <td>s</td>
            <td>x2,y2 x,y</td>
            <td>shorthand / 平滑三次方贝塞尔曲线</td>
            <td>同S，但使用相对坐标</td>
        </tr>
        <tr>
            <td>Q</td>
            <td>x1,y1 x,y</td>
            <td>二次方贝塞尔曲线</td>
            <td>从当前画笔位置绘制一条二次方贝塞尔曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度</td>
        </tr>
        <tr>
            <td>q</td>
            <td>x1,y1 x,y</td>
            <td>二次方贝塞尔曲线</td>
            <td>同Q，但使用相对坐标</td>
        </tr>
        <tr>
            <td>T</td>
            <td>x,y</td>
            <td>平滑的二次贝塞尔曲线</td>
            <td>从当前画笔位置绘制一条二次贝塞尔曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点</td>
        </tr>
        <tr>
            <td>t</td>
            <td>x,y</td>
            <td>平滑的二次贝塞尔曲线</td>
            <td>同T，但使用相对坐标</td>
        </tr>
        <tr>
            <td>A</td>
            <td>rx,ry x-axis-rotation large-arc-flag,sweepflag x,y</td>
            <td>椭圆弧线</td>
            <td>从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向</td>
        </tr>
        <tr>
            <td>a</td>
            <td>rx,ry x-axis-rotation large-arc-flag,sweepflag x,y</td>
            <td>椭圆弧线</td>
            <td>同A，但使用相对坐标</td>
        </tr>
        <tr>
            <td>Z</td>
            <td>无</td>
            <td>闭合路径</td>
            <td>从结束点绘制一条直线到开始点，闭合路径</td>
        </tr>
        <tr>
            <td>z</td>
            <td>无</td>
            <td>闭合路径</td>
            <td>同Z</td>
        </tr>
    </table>
</body>
<script>
    /*
            指令	参数	名称	描述
            M	x,y	moveto
            移动到	移动虚拟画笔到指定的（x,y）坐标，仅移动不绘制
            m	x,y	moveto	同M，但使用相对坐标
            L	x,y	lineto
            连直线到	从当前画笔所在位置绘制一条直线到指定的（x,y）坐标
            l	x,y	lineto	同L，但使用相对坐标
            H	x	horizontal lineto
            水平连线到	绘制一条水平直线到参数指定的x坐标点，y坐标为画笔的y坐标
            h	x	horizontal lineto	同H，但使用相对坐标
            V	y	vertical lineto
            垂直连线到	从当前位置绘制一条垂直直线到参数指定的y坐标
            v	y	vertical lineto	同V，但使用相对坐标
            C	x1,y1 x2,y2 x,y	curveto
            三次方贝塞尔曲线	从当前画笔位置绘制一条三次贝兹曲线到参数（x,y）指定的坐标。x1，y1和x2,y2是曲线的开始和结束控制点，用于控制曲线的弧度
            c	x1,y1 x2,y2 x,y	curveto	同C，但使用相对坐标
            S	x2,y2 x,y	shorthand / 平滑三次方贝塞尔曲线	从当前画笔位置绘制一条三次贝塞尔曲线到参数（x,y）指定的坐标。x2,y2是结束控制点。开始控制点和前一条曲线的结束控制点相同
            s	x2,y2 x,y	shorthand / 平滑三次方贝塞尔曲线	同S，但使用相对坐标
            Q	x1,y1 x,y	二次方贝塞尔曲线	从当前画笔位置绘制一条二次方贝塞尔曲线到参数（x,y）指定的坐标。x1,y1是控制点，用于控制曲线的弧度
            q	x1,y1 x,y	二次方贝塞尔曲线	同Q，但使用相对坐标
            T	x,y	平滑的二次贝塞尔曲线	从当前画笔位置绘制一条二次贝塞尔曲线到参数（x,y）指定的坐标。控制点被假定为最后一次使用的控制点
            t	x,y	平滑的二次贝塞尔曲线	同T，但使用相对坐标
            A	rx,ry x-axis-rotation large-arc-flag,sweepflag x,y	椭圆弧线	从当前画笔位置开始绘制一条椭圆弧线到（x,y）指定的坐标。rx和ry分别为椭圆弧线水平和垂直方向上的半径。x-axis-rotation指定弧线绕x轴旋转的度数。它只在rx和ry的值不相同是有效果。large-arc-flag是大弧标志位，取值0或1，用于决定绘制大弧还是小弧。sweep-flag用于决定弧线绘制的方向
            a	rx,ry x-axis-rotation large-arc-flag,sweepflag x,y	椭圆弧线	同A，但使用相对坐标
            Z	无	闭合路径	从结束点绘制一条直线到开始点，闭合路径
            z	无	闭合路径	同Z


     */
</script>

</html>